<template>
  <div class="egg-loading" v-if="visible">
    <div class="cover-area"></div>
    <div class='loading-area'>
      <div class='loading-block'>
        <img class="egg" :src="eggImg" />
        <img class='hammer' :src="hammerImg" />
        <span class='tip'>请稍后...</span>
      </div>
    </div>
  </div>
</template>

<script>
import eggImg from '@/assets/img/222.png'
import hammerImg from '@/assets/img/0.png'

export default {
  data() {
    return {
      visible: false,
      eggImg,
      hammerImg,
    }
  },
  methods: {
    show() {
      this.visible = true
    },
    close() {
      this.visible = false
    },
  },
}
</script>

<style lang="less" scoped>
.egg-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.cover-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
}
.loading-area {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);

  .loading-block {
    position: relative;
    text-align: center;
    .egg {
      width: 100%;
      vertical-align: middle;
    }

    .hammer {
      position: absolute;
      top: -10px;
      right: -40px;
      width: 200px;
      animation: czmove 0.8s ease-in infinite alternate;
      transform-origin: 100% 100%;
    }
    .tip {
      font-size: 40px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #fded88;
    }
  }
}

@keyframes czmove {
  0% {
    transform: rotate(60deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}
</style>